{% extends 'base.html' %}
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

{% block title %}
    用户登录
{% endblock %}


{% block styles %}
    {{ super() }}
    <style>
        #container {
            padding-top: 30px;
            width: 1000px;
            height: 600px;
            margin: 0 auto;
        }

        #container form {
            margin: 0 auto;
        }

        #container h1 {
            text-align: center;
            margin-bottom: 50px;
        }

        #tab {
            text-align: center;
        }

        #tab span {
            display: inline-block;
            width: 120px;
            text-align: center;
            cursor: default;
            font-size: 18px;
        }

        #tips {
            color: red;
            font-size: 14px;
        }

        .form-horizontal {
            text-align: center;
        }

        .btn-info {
            margin-right: 10px;
        }
    </style>
{% endblock %}
{% block content %}
    {% block newcontent %}
        <div id="container">
            <h1>用户登录</h1>
            <div id="tab">
                <span>用户名 / 密码</span> | <span>手机验证码</span>
            </div>
            <div class="logintab">
                <p class="tips">{{ msg }}</p>
                <form class="form-horizontal" method="post" action="{{ url_for('user.login') }}?f=1">
                    <div class="form-group">
                        <label for="inputUsername" class="col-md-4 control-label">用户名</label>
                        <div class="col-md-6">
                            <input type="text" class="form-control" id="inputUsername" placeholder="username"
                                   name="username">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword" class="col-md-4 control-label">密码</label>
                        <div class="col-md-6">
                            <input type="password" class="form-control" id="inputPassword" placeholder="password"
                                   name="password">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-info" col-md-3>
                                登&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp录
                            </button>
                            <button type="submit" class="btn btn-info" col-md-3>
                                找回&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp密码
                            </button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="logintab">
                <p class="tips">{{ msg }}</p>
                <form class="form-horizontal" method="post" action="{{ url_for('user.login') }}?f=2">
                    <div class="form-group">
                        <div class="col-md-6 col-md-offset-3">
                            <input type="text" class="form-control" id="inputPhone" placeholder="输入手机号码"
                                   name="phone"><span></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-4 col-md-offset-3">
                            <input type="text" class="form-control" id="inputCode" placeholder="输入验证码"
                                   name="code">
                        </div>
                        <div class="col-md-2">
                            <input type="button" id="btnCheck" class="btn btn-info" value="发送验证码"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-md-10">
                            <button type="submit" class="btn btn-info" col-md-3>
                                登&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp录
                            </button>
                            <button type="submit" class="btn btn-info" col-md-3>
                                重&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp置
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    {% endblock %}
{% endblock %}
{# 添加JS脚本 #}
{% block scripts %}
    {{ super() }}
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>

        $(function () {
            //显示|隐藏 登录方式
            $(".logintab").hide();
            $(".logintab").first().show();
            $("#tab span").each(function () {
                $(this).click(function () {
                    let index = $(this).index();
                    if (index == 0) {
                        $(".logintab").eq(0).show();
                        $(".logintab").eq(1).hide();
                    } else {
                        $(".logintab").eq(0).hide();
                        $(".logintab").eq(1).show();
                    }
                })
            })
        })
        // 发送验证码
        $('#btnCheck').click(function () {
            let phone = $('#inputPhone').val();
            let span_obj = $('#inputPhone').next('span');
            span_obj.css({'color': 'red', 'font-size': '12px'});
            if (phone.length == 11) {
                //发送ajax
                $.get("{{ url_for('user.send_message') }}", {phone: phone}, function (data) {
                        if (data.code == 200) {
                            alert('短信发送成功请查收！');
                        } else {
                            alert(data.msg);
                        }
                    }
                )
            } else {
                span_obj.text('必须输入11位手机号码')
            }
        })

    </script>
{% endblock %}